import { useEffect, useRef, useState } from "react";

async function getData(): Promise<Array<{id: number, text: string}>> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve([
        { id: 1, text: '001' },
        { id: 2, text: '002' },
        { id: 3, text: '003' },
      ])
    }, 1000);
  })
}

const Home = () => {
  const ulRef = useRef(null)
  const [list, setList] = useState<Array<{id: number, text: string}>>([])

  const init = async () => {
    const res = await getData()
    setList(res)
  }

  useEffect(() => {
    init()
  }, [])

  useEffect(() => {
    if (list.length) {
    }
  }, [list])

  return (
    <div className='h-full'>
      <p>循环</p>
      {list.length && <ul ref={ulRef}>
        {
          list.map(item => (
            <li key={item.id}>序号：{item.id}, 内容：{item.text}</li>
          ))
        }
      </ul> || null}
    </div>
  )
}

export default Home